<template>
  <div class="publicBox" id="order_estailsCss">

<el-form ref="form" :model="ruleForm" :rules="rules" class="demo-form-inline publicEditFrom" label-width="160px" label-position="left">

<el-row>
     <div class="pubPageTagP">
       <p>故障上报管理/新建</p>               
     </div>
</el-row>

<div>
<el-form ref="form" :inline="true"  class="demo-form-inline">
 <el-row v-if="!disabledFlag">
  <el-form-item label="订单编号">
            <el-input class="pubIptB" v-model="orderNo" placeholder="输入订单编号"></el-input>
  </el-form-item>
   <el-form-item class="label_btn">
            <el-button class="pubBtnBlue" @click="searchOrder" type="primary">查询</el-button>
  </el-form-item>
    <el-form-item label="设备编号">
            <el-input class="pubIptB"  v-model="faultNo" placeholder="故障单编号"></el-input>
  </el-form-item>
 <el-form-item class="label_btn">
            <el-button class="pubBtnBlue" @click="searchFault" type="primary">查询</el-button>
  </el-form-item>
    </el-row>

    <el-row v-else>
        <div class="warp">
            <div class="box">
                <p>创建时间：{{rowData.createtime | ChangeDateFormat}}</p>
            </div>
                <div class="box">
                <p>故障单编号：{{rowData.orderno}}</p>
            </div>
        </div>
    </el-row>
 
</el-form>

    <el-row>
        <div class="pubPage">
        <p>订单信息</p>                 
        </div>
    </el-row>

    <div class="warp">
        <div class="box">
            <p>订单时间：{{rowData.ordertime | ChangeDateFormat}}</p>
            <p>支付时间：{{rowData.orderpaytime | ChangeDateFormat}}</p>
            <p>订单金额：{{rowData.orderamount}}</p>
        </div>
            <div class="box">
            <p>订单编号：{{rowData.orderno}}</p>
            <p>支付流水号：{{rowData.orderpayno}}</p>
            <p>支付金额：{{rowData.payamount}}</p>
        </div>
            <div class="box">
            <p>服务项目：{{rowData.servicesavailablename}}</p>
            <p>支付方式：{{rowData.orderpaytypename}}</p>
            <p>优惠金额：{{rowData.preferentialprice}}</p>
        </div>
            <div class="box">
            <p>订单状态：{{rowData.status}}</p>
            <p class="box_kong"> </p>
            <p>优惠类型：{{rowData.orderrefundno}}</p>
        </div>
    </div>
</div>

<div>
    <el-row>
        <div class="pubPage">
        <p>用户信息</p>               
        </div>
    </el-row>

    <div class="warp">
        <div class="box">
            <p>用户ID：{{rowData.uid}}</p>
        </div>
            <div class="box">
            <p>用户手机号：{{rowData.phone}}</p>
        </div>
    </div>
</div>

<div>
    <el-row>
        <div class="pubPage">
        <p> <span style="color:#F56C6C">*</span>  设备信息</p>               
        </div>
    </el-row>

    <div class="warp">
        <div class="box">
            <p>设备编码：{{ruleForm.equipmentNo}}</p>
            <p>所在门店：{{rowData.storename}}</p>
        </div>
            <div class="box">
            <p>设备类型：{{rowData.equipmenttypename}}</p>
            <p>门店地址：{{rowData.detailed}}</p>
        </div>
            <div class="box">
            <p>设备型号：{{rowData.model}}</p>
        </div>
            <div class="box">
            <p>设备状态：{{rowData.equipmentstatusname}}</p>
        </div>
    </div>
</div>

   <el-row>
        <div class="pubPage">
        <p>故障处理信息</p>               
        </div>
    </el-row>

    <div class="boxTop">
         <el-form-item label="故障原因" prop="reason" label-width="80px">
                   <el-input
                   style="width:513px"
                     type="textarea"
                     :autosize="{ minRows: 3, maxRows: 4}"
                     placeholder="请输入故障原因"
                     v-model="ruleForm.reason">
                   </el-input>
       </el-form-item>
       <el-form-item label="故障图片" prop="upimg" class="upimg" label-width="80px">
                 <publicUpdate
                 id="ImgBox" 
                 :paramsData="ruleForm" 
                 @successFn="successFn"
                 @handleChange="handleChange"
                 :flag = "false"
                 ref="publicUpImg"
                 :limitUpload=3
                  v-if="!disabledFlag">
                </publicUpdate>

                <div  class="showImg" v-else>
                    <div v-for="item in imgList" :key="item" style="height:87px;width:87px;margin-right:20px">
                    <el-image
                    object-fit:contain
                    :src="item"
                    :preview-src-list="srcList"></el-image>
                </div>
                </div>
                
       </el-form-item>
        </div>
       <div class="boxTopL">
         <el-form-item label="处理意见" label-width="80px">
                   <el-input
                   style="width:513px"
                     type="textarea"
                     :autosize="{ minRows: 3, maxRows: 4}"
                     placeholder="请输入处理意见"
                     v-model="ruleForm.opinion">
                   </el-input>
       </el-form-item>
            <el-button class="pubBtnBlue105 btnBottom" type="primary"  v-if="disabledFlag" @click="goRufrom">生成退款单</el-button>
        </div>

        <div  class="boxTopL" v-if="!disabledFlag">
            <el-form-item label="联系人" label-width="80px" style="margin-right : 47px">
                    <el-input class="pubIpt" v-model="ruleForm.contacts" placeholder="报修人姓名"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" label-width="80px">
                    <el-input class="pubIpt" v-model="ruleForm.phone" placeholder="报修人电话"></el-input>
            </el-form-item>
        </div>

        <div class="warp" v-else>
            <div class="box">
                <p>联系人:{{rowData.contacts}}</p>
            </div>
                <div class="box" style="margin-left:176px">
                <p>联系电话:{{rowData.phone}}</p>
            </div>
        </div>


        <div class="boxTopL">
             <el-form-item label="处理状态" prop="status"  label-width="80px" style="margin-right : 47px">
                <el-select  filterable  placeholder="审核中" class="pubSlt300" v-model="ruleForm.status">
                    <el-option
                    v-for="item in statue"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="转入仓库" prop="Warehouse"  label-width="80px">
                <el-select  filterable  placeholder="成品库" class="pubSlt300"  v-model="ruleForm.Warehouse">
                    <el-option
                    v-for="item in statueLibrary"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
        </div>
<el-row class="pubSubmitBtn-row">
  <el-form-item>
            <el-button class="pubBtnBlue" type="primary" @click="submitForm()">提交</el-button>
            <el-button class="pubBtnGree" type="primary" @click="$canCleFn">取消</el-button>
  </el-form-item>
</el-row>
</el-form>
  </div>
</template>

<script>
import * as API from "@api/operate.js"
import Vue from 'vue'
import publicUpdate from "@/components/public/publicUpImg"
export default {
  components: {
    publicUpdate
  },
  data() {
    return {
    filesList:[],
    orderNo:"",
    faultNo:"",
    rowData:{},
    id:'',
    ruleForm:{
             reason:'',
             opinion:'',
             status:'',
             Warehouse:'',
             orderId:"",  //订单id
             equipmentNo:"",
             contacts:'',
             phone:'',
             id:''
         },
         disabledFlag:false,
         imgList:[],
          srcList: [],
         rules:{
            reason: [
                { required: true, message: '请输入故障原因', trigger: 'blur' },
                ],
            status:[
                { required: true, message: '请选择退款方式', trigger: 'change' }, 
            ],
            Warehouse:[
                { required: true, message: '请选择退款方式', trigger: 'change' }, 
            ],
         },
         statue:[
             {
                 value:"1",
                 name:'审核中'
             },
             {
                 value:"2",
                 name:'驳回'
             },
             {
                 value:"3",
                 name:'转维修'
             }   
         ],
         statueLibrary:[
             {
                 value:"a",
                 name:'成品库'
             },
             {
                 value:"b",
                 name:'运营库'
             },
             {
                 value:"c",
                 name:'维修库'
             }   
         ],
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {


  },
  // 监控data中的数据变化
  watch: {


 },
  methods: {
    goRufrom(){
         this.$router.push({path:"/platform/finance/refund_from"})
    },
    init(){
        API.checkfault(this.id).then(res=>{
            if(res.IsPositive){
                this.rowData = res.Data
                this.ruleForm.equipmentNo = res.Data.equipmentno
                this.imgList = res.Data.pics.split(",");
                console.log(this.imgList)
                this.ruleForm.id = res.Data.id
                this.imgList.forEach(item => {
                    this.srcList.push(item)
                })
                console.log(this.srcList)
            }
        })
    },
    handleChange(filesList){
        this.filesList=filesList
    },
    searchOrder(){         //订单编号查询
         if(this.orderNo==""){
             this.$message.warning("查询条件不能为空")
             return
         }
         API.getOrderData(this.orderNo).then(res=>{
                  if(res.IsPositive){
                      this.ruleForm.orderId=res.Data.orderid,
                      this.ruleForm.equipmentNo=res.Data.equipmentno
                      this.rowData=res.Data
                  }
         })
    },
    searchFault(){        //故障单编号查询
         if(this.faultNo==""){
             this.$message.warning("查询条件不能为空")
             return
         }
         API.getFaultData(this.faultNo).then(res=>{
             if(res.IsPositive){
                      this.ruleForm.orderId=""
                      this.ruleForm.equipmentNo=res.Data.equipmentno
                      this.rowData=res.Data
                  }
         })
    },
    submitForm(){
        if(this.disabledFlag != true ){
             if(this.ruleForm.orderId=="" && this.ruleForm.equipmentNo==""){
                 this.$message.warning("请先查询单据")
                 return
             }
             let that=this
             that.$refs["form"].validate((valid) => {
              if (valid) {
                        let formData = new FormData()
                        if(that.filesList.length>0){       //将所有的图片二进制流数据放到一个数组里面
                            let fileArray=[]
                            that.filesList.forEach(res=>{
                                formData.append('files',res.raw)
                            })
                        }
                        for(let i in that.ruleForm){           
                            formData.append(i,that.ruleForm[i])
                        }
                        API.addfault(formData).then(res=>{
                            if(res.IsPositive){
                                this.$message.success({message:"操作成功"})
                                this.$router.push({path:'/platform/operate/fault'})
                            }
                        })
              } 
            })
        }else{
            console.log("修改按钮")
            let that=this
             that.$refs["form"].validate((valid) => {
              if (valid) {
                        let formData = new FormData()
                        // if(that.filesList.length>0){       //将所有的图片二进制流数据放到一个数组里面
                        //     let fileArray=[]
                        //     that.filesList.forEach(res=>{
                        //         formData.append('files',res.raw)
                        //     })
                        // }
                        for(let i in that.ruleForm){           
                            formData.append(i,that.ruleForm[i])
                        }
                        API.Editfault(formData).then(res=>{
                            if(res.IsPositive){
                                this.$message.success({message:"操作成功"})
                                this.$router.push({path:'/platform/operate/fault'})
                            }
                        })
              } 
            })
        }
            
    },
    successFn(res){
               if(res.IsPositive){
                  this.$message.success({message:"操作成功"})
                }else{
                  this.$message.error({message:res.ErrorCode})
                }
    }

  },
  created() {
        if(Object.keys(this.$route.query).length>0){              //ES6写法, Object.keys(targetObject)  将对象的key作为一个数组返回
            this.disabledFlag=true        //true代表修改数据
            // this.rowData=this.$route.query.data
            console.log(this.$route.query.data,"this.$route.query.data")
            this.id=this.$route.query.data.id
            console.log(this.id)
            this.init()
            this.ruleForm={
                    reason:this.$route.query.data.reason, 
                    opinion:this.$route.query.data.opinion, 
            }
        }
  },
  filters:{
      ChangeDateFormat(value){
          if(value && value!="") return Vue.prototype.ChangeDateFormat(value,true)
          return ""
      }
  },
  mounted() {


  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang="less" >
    #ImgBox{
        position: relative;
    .el-upload--picture-card{
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        box-sizing: border-box;
        width: 83px;
        height: 83px;
        line-height: 80px;
        vertical-align: top;
    }
    }
</style>
<style lang="less" scoped>
 #order_estailsCss{
     display: flex;
     flex-direction: column;
        .pubPage{ 
            padding:0 0 10px 0;
            color: #a7a7a7;
            border-bottom: 1px dashed #000000;
        }
        .warp{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            width: 1280px;
            margin: 15px 0;
            .box{
                width: 260px;
                .box_kong{
                    height: 22px;
                }
                p{
                    margin-bottom: 5px;
                    font-size: 16px;
                }
                
            }
            
            .box_p{
                    margin-top: 28px;
                }
        }
        .boxTop{
                margin-top: 20px;
                display: flex;
                flex-direction: row;
            }
        .boxTopL{
            margin-top: 20px;
            display: flex;
            flex-direction: row;
            align-items: flex-end;
        }
        .showImg{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
        }
        .btnBottom{
            margin-bottom: 17px;
            margin-left: 20px;
        }
        .upimg{
            margin-left: 20px;
        }
        .upimgText{
            position: absolute;
            top: 20px;
            left: 15px;
        }
    }
</style>